<template>
	<view class="courses-detail">
		<zero-custom-bar :effect="false" :fixedHolder="false" :singleIcon="true" title="" color="#fff"
			:singleIconType="'back'">
		</zero-custom-bar>
		<view class="banner">
			<uni-swiper-dot class="uni-swiper-dot-box" mode="round" field="content">
				<swiper class="swiper-box">
					<swiper-item v-for="(item, index) in data.banners || []" :key="index">
						<view class="swiper-item">
							<image class="banner-img" :src="item.pic" mode="scaleToFill">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="title-box">
			<view class="title-box-top">
				<view class="title">
					<text class="h1">{{ data.title }}</text>
					<uv-tags :text="data.type == 0 ? '初训' : '复训'" size="mini"></uv-tags>

					<!-- <text class="time">开课时间 2024-11-01 9:00</text> -->
				</view>
				<view class="right">
					<button :plain="true" open-type="share" class="icon">
						<view class="iconfont icon-fenxiang1">
						</view>
						<text>分享</text>
					</button>
					<view class="icon" @click="collect">
						<text class="iconfont icon-shoucang1">
						</text>
						<text>收藏</text>
					</view>
				</view>
			</view>
			<view class="title-info">
				{{ data.description }}
			</view>
			<view class="title-price">
				<view class="price">
					<view class="rmb">
						<text class="rmbicon">¥</text><text>{{ data.price || 0 }}</text>
					</view>
					<text class="original">原价¥ {{ data.oldPrice || 0 }}</text>
				</view>
				<text class="join">已有{{ data.totalNum || 0 }}人报名学习</text>
			</view>
		</view>
		<view class="teacher" v-if="data.teacher">
			<image :src="data.teacher.avatar" mode="aspectFit"></image>
			<text class="teacher-name">{{ data.teacher.nickName }}</text>
			<text class="teacher-tag" v-if="data.teacher.tags.length > 0" v-for="(item, index) in data.teacher.tags"
				:key="index">{{ item.tagName }}</text>
		</view>
		<view class="courses-info">
			<uv-sticky offset-top="40">
				<uv-tabs style="background: #fff; margin: 20rpx 0;" :list="list" @click="tabClick" lineWidth="60rpx"
					:scrollable="false" lineColor="#FD3523" :activeStyle="{ 'color': '#FD3523' }"
					:itemStyle="{ 'fontSize': '30rpx', 'height': '90rpx' }"></uv-tabs>
			</uv-sticky>
			<view class="content">
				<view class="box1" v-if="tabIdx == 0">
					<rich-text :nodes="data.content"></rich-text>
				</view>
				<view class="directory" v-if="tabIdx == 1">
					<text class="content-title">课程目录：</text>
					<view class="directory-item" v-for="(item, index) in data.chapters" :key="item.id">
						<!-- <view class="iconfont icon-bofang1">
						</view> -->
						<view class="item-mid">
							<text class="item-mid-title">{{ index + 1 }}.{{ item.title }}</text>
							<view class="item-time">
								<text>{{ item.hour }}课时</text>
								<text class="progress" style="color: #f00;">未学习</text>
							</view>
						</view>
						<view class="item-try">
							试看
						</view>
					</view>
				</view>
				<view class="comment" v-if="tabIdx == 2">
					<view style="display: flex;justify-content: space-between;">
						<text class="content-title">全部评论：{{ commentTotal || 0 }}</text>
						<text class="content-title" @click="showCommentPopup">写评论</text>
					</view>
					
					<!-- 使用 uv-list 组件 -->
					<uv-list
						:border="false"
					>
						<template v-if="commentList.length > 0">
							<uv-list-item
								v-for="(item, index) in commentList"
								:key="index"
							>
								<view class="comment-list">
									<image :src="item.userAvatar" mode=""></image>
									<view class="comment-list-left">
										<view class="name-box">
											<view class="comment-left">
												<text class="comment-name">{{ item.userName }}</text>
												<view class="comment-star">
													<uv-rate 
														readonly 
														:count="5" 
														:value="Number(item.start)" 
														size="12"
														active-color="#FA3534" 
														inactive-color="#b2b2b2" 
														gutter="1"
													></uv-rate>
												</view>
											</view>
											<text class="time">{{ parseTime(item.createTime) }}</text>
										</view>
										<view class="comment-txt">
											<text>{{ item.comment }}</text>
										</view>
									</view>
								</view>
							</uv-list-item>
						</template>
						
						<!-- 空状态 -->
						<uv-empty v-if="commentList.length === 0" mode="data" text="暂无评论"></uv-empty>
						
						<!-- 加载更多组件 -->
						<uv-load-more
							:status="loadStatus"
							@loadmore="loadMoreComments"
							:icon-type="iconType"
							:load-text="loadText"
						/>
					</uv-list>
				</view>
			</view>
		</view>
		<view class="courses-btn">
			<view class="icon">
				<view class="iconfont icon-kefu1">

				</view>
				<text>客服</text>
			</view>
			<view class="icon" @click="goHome">
				<view class="iconfont icon-shouye-zhihui">
				</view>
				<text>首页</text>
			</view>
			<view @click="join" class="join">
				{{ data.buy ? '已报名' : '立即报名' }}
			</view>
		</view>
		<!-- <qrcode-poster ref="poster" :title="goods.title" 
        :subTitle="goods.sub_title" 
        :headerImg="goods.image[0]"
        :price="goods.price"></qrcode-poster> -->
		<login-popup @success="onLoginSuccess" :title="loginConfig.title" :slogan="loginConfig.slogan"
			ref="applogin"></login-popup>
		<uv-popup ref="commentPopup" mode="bottom" :close-on-click-overlay="true" round="20"
			:safe-area-inset-bottom="true" :custom-style="{
				'padding-top': '30rpx',
				'padding-bottom': 'calc(env(safe-area-inset-bottom) + 30rpx)'
			}">
			<view class="comment-popup">
				<view class="popup-header">
					<text>课程评价</text>
					<text class="close" @click="closeCommentPopup">×</text>
				</view>

				<view class="rating-box">
					<text>课程评分</text>
					<uv-rate v-model="commentForm.start" :count="5" active-color="#ff9900" :size="40"></uv-rate>
				</view>

				<view class="comment-box">
					<textarea v-model="commentForm.text" placeholder="请输入您的评价内容" :maxlength="200"
						class="comment-textarea"></textarea>
					<text class="word-count">{{ commentForm.text.length }}/200</text>
				</view>

				<button class="submit-btn" @click="submitComment">
					提交评价
				</button>
			</view>
		</uv-popup>
	</view>
</template>

<script>

import {
	getCourseDetail,
	commentCourse,
	collectCourse,
	getComment
} from '@/http/exam.js'
import { parseTime } from '@/utils/tools';
export default {
	data() {
		return {

			data: {
				banners: [],
				students: [],
				teacher: null,
				price: 0,
				oldPrice: 0,
				title: '',
				remark: ''
			},
			courseId: '',
			tabIdx: 0,
			list: [{
				name: '课程详情',
			}, {
				name: '课程目录',
			}, {
				name: '课程评论',
			}],
			loginConfig: {
				title: '',
				slogan: ''
			},
			commentForm: {
				star: 5,
				text: ''
			},
			commentQuery: {
				courseId: '',
				pageNum: 1,
				pageSize: 2
			},
			hasMore: true,
			commentList: [],
			commentTotal: 0,
			loadStatus: 'loadmore', // loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			loadText: {
				loadmore: '上拉加载更多',
				loading: '加载中...',
				nomore: '没有更多了'
			},
			iconType: 'circle'
		}
	},
	onLoad(options) {
		console.log(options);
		this.courseId = options.id
	},
	onShow() {
		this.onLoadData()
	},
	onReachBottom() {
		if (this.tabIdx === 2) {
			this.loadMoreComments()
		}
	},
	methods: {
		parseTime,
		async onLoadData() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})

			try {
				const res = await getCourseDetail({ courseId: this.courseId })
				this.data = {
					...this.data,
					...res.data
				}
			} catch (err) {
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		goHome() {
			uni.switchTab({
				url: '/pages/courses/courses'
			})
		},
		join() {
			if (this.data.buy) {
				uni.showToast({
					title: '您已经已报名此课程',
					icon: 'none'
				})
				return
			}
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showModal({
					title: '请先登录',
					content: '登录后即可报名课程',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					}
				})
				return
			}
			uni.setStorageSync('courseItem', this.data)
				uni.navigateTo({
					url: `/pages/order/index?id=${this.courseId}`
			})
		},
		tabClick(val) {
			this.tabIdx = val.index
			if (val.index === 2) {
				// 重置分页参数
				this.commentQuery.pageNum = 1
				this.commentList = []
				this.loadStatus = 'loadmore'
				this.getCommentList()
			}
		},
		async getCommentList(isLoadMore = false) {
			try {
				const params = {
					...this.commentQuery,
					courseId: this.courseId
				}
				
				const res = await getComment(params)
				
				if (isLoadMore) {
					this.commentList = [...this.commentList, ...res.data.list]
				} else {
					this.commentList = res.data.list
				}
				
				this.commentTotal = res.data.total
				this.hasMore = this.commentList.length < res.data.total
				
				// 更新加载状态
				this.loadStatus = this.hasMore ? 'loadmore' : 'nomore'
			} catch (err) {
				this.loadStatus = 'loadmore'
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		async loadMoreComments() {
			if (this.loadStatus !== 'loadmore') return
			
			this.loadStatus = 'loading'
			this.commentQuery.pageNum++
			await this.getCommentList(true)
		},
		showLogin(options = {}) {
			const {
				title = '欢迎加入我们！',
				slogan = '-加入我们获取更多学习功能-'
			} = options

			this.loginConfig.title = title
			this.loginConfig.slogan = slogan
			this.$refs.applogin.show()
		},
		onLoginSuccess() {
			this.$refs.applogin.close()
			// 可以添加其他登录成功后的逻辑
		},
		showCommentPopup() {
			if(this.data.buy) {
				this.$refs.commentPopup.open()
			} else {
				uni.showToast({
					title: '购买课程后才能评价',
					icon: 'none'
				})
			}
		},
		closeCommentPopup() {
			this.$refs.commentPopup.close()
			this.commentForm = {
				star: 5,
				text: ''
			}
		},
		submitComment() {
			if (!this.commentForm.text.trim()) {
				uni.showToast({
					title: '请输入评价内容',
					icon: 'none'
				})
				return
			}
			commentCourse({
				courseId: this.courseId,
				text: this.commentForm.text,
				start: this.commentForm.start
			}).then(res => {
				this.closeCommentPopup()
				uni.showToast({
					title: '评价成功',
					icon: 'success'
				})
				this.getCommentList()

			})
		},
		collect() {
			collectCourse({
				courseId: this.courseId
			}).then(res => {
				uni.showToast({
					title: '收藏成功',
					icon: 'success'
				})
				this.onLoadData()
			})
		}
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {// 来自页面内分享按钮
			console.log(res.target)
			return {
				title: `我在报名${this.data.title}课程`,
				path: `/pages/courses/detail?id=${this.courseId}`
			}
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background: #F7F6F9;
}

.courses-detail {
	.banner {
		height: 455rpx;

		.swiper-box {
			height: 455rpx;
		}

		image {
			width: 100%;
			height: 455rpx;
		}
	}
}

.title-box {
	padding: 40rpx 35rpx;
	background-color: #fff;

	.title-box-top {
		display: flex;
		justify-content: space-between;
		align-items: baseline;

		.title {
			display: flex;
			align-items: center;

			.h1 {
				font-weight: 600;
				font-size: 34rpx;
				color: #12141A;
				// margin-bottom: 20rpx;
			}

			.time {
				font-weight: 500;
				font-size: 24rpx;
				color: #12141A;
			}

			text {
				display: block;
			}
		}

		.right {
			display: flex;

			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #494E5C;
				line-height: 41rpx;
			}

			.iconfont {
				font-size: 40rpx
			}

			.icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 80rpx;
			}

			button {
				background: transparent;
				border: none;
				padding: unset;
				line-height: unset;
			}
		}
	}

	.title-info {
		font-weight: 400;
		font-size: 24rpx;
		color: #A5A5A5;
		display: block;
		margin-top: 15rpx;
		line-height: 38rpx;
		display: -webkit-box;
		/* 将对象作为弹性伸缩盒子模型显示 */
		-webkit-box-orient: vertical;
		/* 设置盒子垂直排列子元素 */
		-webkit-line-clamp: 2;
		/* 显示的行数 */
		overflow: hidden;
		/* 隐藏超出的内容 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
	}

	.title-price {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.price {
			display: flex;
			align-items: baseline;

			.rmb {
				font-weight: 500;
				font-size: 40rpx;
				color: #FD3523;
				display: flex;
				align-items: center;

				.rmbicon {
					font-weight: 500;
					font-size: 28rpx;
					color: #FD3523;
				}
			}

			.original {
				margin-left: 15rpx;
				font-weight: 400;
				font-size: 18rpx;
				color: #999999;
				line-height: 48rpx;
				text-decoration-line: line-through;
			}
		}

		.join {
			padding: 0 10rpx;
			font-weight: 600;
			font-size: 22rpx;
			color: #FFFFFF;
			height: 35rpx;
			line-height: 35rpx;
			background: #F47134;
			border-radius: 4rpx;
		}
	}
}

.teacher {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	background: #fff;
	padding: 15rpx 30rpx;

	image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.teacher-name {
		margin-left: 10rpx;
		font-weight: 600;
		font-size: 30rpx;
		color: #12141A;
	}

	.teacher-tag {
		margin-left: 10rpx;
		padding: 0 8rpx;
		height: 36rpx;
		line-height: 36rpx;
		background: #E1605C;
		border-radius: 6rpx;
		font-weight: 600;
		font-size: 22rpx;
		color: #FFFFFF;
	}
}

.courses-info {
	.content {
		background: #fff;
		padding: 30rpx;
		line-height: 34rpx;
		font-size: 26rpx;
		color: #6F7581;
	}

	.content-title {
		font-weight: 700;
		font-size: 28rpx;
		color: #1E1E1E;
		display: block;
	}

	.box1 {
		// display: none;
	}

	.directory {
		.directory-item {
			display: flex;
			justify-content: space-between;
			background: #F7F6F9;
			border-radius: 10rpx;
			padding: 25rpx;
			margin: 25rpx 0;

			.iconfont {
				font-size: 50rpx;
			}

			.item-mid {
				flex: 1;
				margin: 0 25rpx;

				.item-mid-title {
					font-weight: 400;
					font-size: 28rpx;
					color: #12141A;
					margin-bottom: 10rpx;
					display: block;
				}

				.item-time {
					text {
						color: #6F7581;
						font-size: 26rpx;
					}

					.progress {
						color: #3F8426;
						display: inline-block;
						margin-left: 8rpx;
					}
				}
			}

			.item-try {
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background: #FD3523;
				border-radius: 6rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				align-self: center;
			}
		}
	}

	.comment {
		.comment-list {
			margin-top: 35rpx;
			display: flex;
			padding-bottom: 35rpx;
			border-bottom: 2rpx solid #F2F2F2;

			image {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
			}

			.comment-list-left {
				flex: 1;
				margin-left: 15rpx;

				.name-box {
					display: flex;

					.comment-left {
						flex: 1;

						.comment-name {
							font-weight: 500;
							font-size: 28rpx;
							color: #525355;
						}

						.comment-star {
							display: flex;

							.iconfont {
								color: #FF7C59;
								;
							}
						}
					}
				}

				.comment-txt {
					margin-top: 20rpx;
				}
			}
		}
	}
}

.courses-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 18rpx;
	padding-left: 20rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 15rpx);
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

	.icon {
		width: 120rpx;
		text-align: center;

		.iconfont {
			color: #e5e5e5;
			font-size: 50rpx;
		}

		text {
			font-weight: 400;
			font-size: 24rpx;
			color: #494E5C;
		}
	}

	.join {
		height: 85rpx;
		line-height: 85rpx;
		background: #FD3523;
		border-radius: 10rpx 0rpx 0rpx 10rpx;
		flex: 1;
		font-weight: 600;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
	}
}

.courses-detail {
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.comment-popup {
	padding: 0 30rpx;

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.close {
			font-size: 40rpx;
			color: #999;
			padding: 10rpx;
		}
	}

	.rating-box {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		text {
			font-size: 28rpx;
			color: #666;
			margin-right: 20rpx;
		}
	}

	.comment-box {
		position: relative;
		margin-bottom: 30rpx;

		.comment-textarea {
			width: 100%;
			height: 200rpx;
			padding: 20rpx;
			background: #f8f8f8;
			border-radius: 8rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.word-count {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #FD3523;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
	}
}
</style>